<script lang="ts" setup>
import { getQuery } from '@/common/utils';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

const handelLogoClick = () => {
  if (route.name === 'Home') {
    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    });
  } else {
    router.push(getQuery('/'));
  }
};
</script>
<template>
  <div class="float-home">
    <div class="logo" @click="handelLogoClick">
      <div>
        <img src="@/assets/img/logo.png" alt="Puzzle Games Pro" />
      </div>
      <div>
        <span>Puzzle Games Pro</span>
      </div>
    </div>
    <div class="ops">
      <div @click="handelLogoClick"><van-icon name="home-o" /></div>
      <div @click="$router.push(getQuery(`/search`))">
        <img src="@/assets/img/search.svg" />
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.float-home {
  position: fixed;
  width: 109.5px;
  height: 109px;
  top: 13px;
  right: 14px;
  border-radius: 22px;
  background: #fff;
  z-index: 90;
  display: flex;
  flex-direction: column;

  .logo {
    flex: 1;
    border-bottom: 1px solid #f0f5fc;
    color: #444;
    font-size: 10px;
    text-align: center;

    img {
      height: 35px;
      margin: auto;
      margin-top: 8px;
    }

    span {
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
      background-clip: 'text';
      background-image: linear-gradient(45deg, #4398d1, #fdb62f, #c94536, #88b337);
    }
  }

  .ops {
    display: flex;
    height: 35px;

    div {
      flex: 1;
      font-size: 20px;
      color: #d4237a;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;

      &:nth-child(1) {
        border-right: 1px solid #f0f5fc;
      }
    }
  }
}
</style>
